<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="80%"
      
    >
        <el-row>
            <el-form :model="bindList" ref="bindList" :rules="rules"  label-width="140px" class="demo-ruleForm">
                <el-col :span="12">
                    <el-form-item label="品牌名称" prop="name">
                         <el-input v-model="bindList.name" placeholder="品牌名称"></el-input>
                    </el-form-item>
                </el-col>
                 <el-col :span="12">
                    <el-form-item label="首字母" prop="firstLetter">
                         <el-input v-model="bindList.firstLetter" placeholder="首字母"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="排序" prop="sort">
                         <el-input v-model="bindList.sort" placeholder="排序"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="产品数量" prop="productCount ">
                         <el-input v-model="bindList.productCount" placeholder="产品数量"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否展示" >
                        <el-switch  v-model="bindList.showStatus" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否为品牌制造商" >
                        <el-switch  v-model="bindList.factoryStatus" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上传专区大图" >
                         <el-upload
                            class="avatar-uploader"
                            :action="uploadUrl"
                            :show-file-list="false"
                            :headers="uploadHeaders"
                            :on-success="handleAvatarSuccess"
                            >
                            <img style="width:150px;height:auto" v-if="bindList.bigPic" :src="bindList.bigPic" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上传logo" >
                        <el-upload
                            class="avatar-uploader"
                            :action="uploadUrl"
                            :show-file-list="false"
                            :headers="uploadHeaders"
                            :on-success="AvatarSuccess"
                            >
                            <img style="width:100px;height:auto" v-if="bindList.logo" :src="bindList.logo" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBrandsss">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import mix from "@/mixin/index";
import brand from "@/api/product/brand"
export default {
    mixins:[mix],
  data() {
    return {
        dialogVisible: false,
        //验证
         rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ]},
          //活动列表
          bindList:{
            bigPic: "",
            brandStory: "",
            createTime: "",
            factoryStatus: 1,
            firstLetter: "",
            id: "",
            logo: "",
            modifyTime: "",
            name: "",
            productCommentCount:'',
            productCount:'',
            showStatus: 1,
            sort:'',
          },
          id:'',
    }
  },
  methods: {
      //新增
      setBrand(){
        this.dialogVisible=true;
      },
      //从组件获取的id
    open(row){
        console.log(row)
        this.id=row.id
        this.bindList=row;
        this.dialogVisible=true;
    },
      //大图上传成功的回调
      handleAvatarSuccess(res, file){
          console.log(res,file);
          if(res.success){
              this.bindList.bigPic=res.data.fileUrl
          }else{
              this.$message.error("获取图片失败,请重新上传")
          }
      },
      //上传logo成功的回调
      AvatarSuccess(res, file){
          console.log(res,file);
        if(res.success){
              this.bindList.logo=res.data.fileUrl
          }else{
              this.$message.error("获取图片失败,请重新上传")
          }
      },
      //确定上传

      addBrandsss(){
           this.$refs.bindList.validate((valid) => {
          if (valid) {
              if(this.id){
              console.log(this.id,"修改页面")
            this.$confirm('是否确认修改, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    console.log(this.bindList);   
                    brand.updateBrand(this.bindList).then(res=>{
                        console.log(res);
                        if(res.success){
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            this.bindList=this.$options.data().bindList
                        }else{
                            this.$message.error("修改品牌失败")
                        }
                    })
                    // this.$emit('success', this.bindList);
                    this.dialogVisible=false;
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
                });
              
          }else{
              console.log(this.id,"新增页面")
            this.$confirm('是否确认新增品牌, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    console.log(this.bindList);   
                    brand.addBrand(this.bindList).then(res=>{
                        console.log(res);
                         
                        if(res.success){
                            this.$message({
                                type: 'success',
                                message: '新增成功!'
                            });
                            this.bindList=this.$options.data().bindList
                        }else{
                            this.$message.error("添加品牌失败")
                        }
                    })
                    // this.$emit('success', this.bindList);
                    this.dialogVisible=false;
                }).catch(() => {
                  
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
                });
             }
       
          } else {
            this.$message.error("请填写必要信息")
            return false;
          }
        });
        
      }
  },
  created() {
   
  },
};
</script>